<template>
  <div class="page">
    <div
      class="address-wrap"
      v-if="hasAddress"
      @click="$nav('../addressList/main?select=1')"
    >
      <div class="left icon">
        <img
          src="/static/img/address.png"
          alt=""
        >
      </div>
      <div class="user">
        <div class="name">{{addressData.userName}} <span>{{addressData.mobile}}</span></div>
        <div class="address">{{addressData.area}}{{addressData.address}}</div>
      </div>
      <div class="right icon">
        <img
          src="/static/img/right.png"
          alt=""
        >
      </div>
    </div>
    <div
      class="address-wrap"
      v-else
    >
      <div class="left icon">
        <img
          src="/static/img/address.png"
          alt=""
        >
      </div>
      <div class="user">
        暂未设置收货地址 <span
          class="add"
          @click="$('../Add_address/main')"
        >立即添加</span>
      </div>
      <div class="right icon">
        <img
          src="/static/img/right.png"
          alt=""
        >
      </div>
    </div>
    <div class="product">
      <div
        class="none"
        v-if="plist < 1"
      >
        <span class="label">请添加上门回收的物品吧</span>
        <div class="addProduct">
          <img
            src="/static/img/addProduct.png"
            alt=""
          >
          <span @click="showCate = true">立即添加</span>
        </div>
      </div>
      <div
        class="productList"
        v-else
      >
        <div
          class="rows"
          v-for="(item, index) in plist"
          :key="index"
        >
          <div class="left">
            <span class="t">{{item.name}}</span>
            <span class="desc">{{item.size}}</span>
          </div>
          <div class="right">
            <!-- <span class="price">{{item.price}}元</span> -->
            <div
              class="del"
              @click="plist.splice(index, 1)"
            ><img
                src="/static/img/delProduct.png"
                alt=""
              ></div>
          </div>
        </div>
      </div>
      <div
        class="add"
        v-if="plist.length > 0"
        @click="showCate = true"
      >继续添加</div>
    </div>
    <div class="form">
      <div class="form-item">
        <div class="label">预约时间</div>
        <div class="right">
          <view
            class="picker"
            @click="showTimePicker = true;"
          >
            <span v-if="!form.appointmentTime">点击选择</span>
            {{form.appointmentTime}}
          </view>
          <img
            src="/static/img/3.png"
            alt=""
          >
        </div>
      </div>
      <div class="form-item">
        <div class="label">备注</div>
        <input
          type="text"
          :value="form.message"
          placeholder="备注"
          @blur="setInput($event, 'message')"
        />
      </div>
      <div class="record us">
        <div class="t">上传图片（1张）</div>
        <div class="imgwrap">
          <div
            class="img-item"
            @click="upload()"
          >
            <img
              v-if="imgUrl"
              :src="baseImgUrl"
            >
            <div
              v-if="imgUrl"
              class="del"
              @click.stop="del(index)"
            >
              <img
                src="/static/img/38.png"
                alt=""
              >
            </div>
          </div>
          <img
            @click="upload()"
            src="/static/img/upload_default.png"
            alt=""
            v-if="!imgUrl"
          >
        </div>
      </div>
    </div>
    <div
      class="btn"
      @click="save()"
    >提交</div>
    <div
      class="over"
      v-if="showTimePicker"
      @click="showTimePicker = false"
    ></div>
    <picker-view
      class="timePicker"
      indicator-style="border-top: 1px solid #00E800;border-bottom: 1px solid #00E800;font-size: 0.7rem;"
      :class="{show: showTimePicker}"
      :pickend="true"
      @change="changeTime($event)"
    >
      <view class="oper">
        <span @click="showTimePicker = false">取消</span>
        <span @click="showTimePicker = false">确定</span>
      </view>
      <picker-view-column
        class="pickerViewCol"
        :value="monthIndex"
      >
        <view
          v-for="item in month"
          :key="item"
        >{{item}}月</view>
      </picker-view-column>
      <picker-view-column
        class="pickerViewCol"
        :value="dateIndex"
      >
        <view
          v-for="item in date"
          :key="item"
        >{{item.v}}号</view>
      </picker-view-column>
      <picker-view-column
        class="pickerViewCol"
        :value="hoursIndex"
      >
        <view
          v-for="item in hours"
          :key="item"
        >{{item}}时</view>
      </picker-view-column>
      <picker-view-column
        class="pickerViewCol"
        :value="minIndex"
      >
        <view
          v-for="item in min"
          :key="item"
        >{{item}}分</view>
      </picker-view-column>
    </picker-view>
    <div
      class="cate-wrap"
      :class="{show: showCate}"
    >
      <div class="title">添加废品</div>
      <div
        class="close"
        @click="showCate = false"
      >关闭</div>
      <div class="con">
        <div class="cate-list">
          <div
            class="cateItem"
            :class="{active: cateIndex == index}"
            v-for="(item, index) in cateMainList"
            :key="index"
            @click="cateIndex = index"
          >{{item.name}}</div>
        </div>
        <div class="cate-desc">可正常使用的闲置数码产品</div>
        <div class="property-wrap">
          <div
            class="propertyItem"
            v-for="(item, index) in property"
            :key="index"
          >
            <div class="t">{{item.name}}</div>
            <div
              class="childItem"
              v-for="(citem, cindex) in item.children"
              :key="cindex"
              :class="{active: item.childIndex == cindex}"
              @click="setChildIndex(item, cindex, citem)"
            >{{citem.name}}</div>
          </div>
        </div>
      </div>
      <div class="payWrap">
        <div class="text">预估回收价格<span class="price">{{total}}元</span></div>
        <div
          class="payBtn"
          @click="saveCate()"
        >加入回收清单</div>
      </div>
    </div>
    <div
      class="over"
      v-if="showCate"
      @click="showCate = false"
    ></div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  data () {
    return {
      childIndex: 0,
      cateIndex: 0,
      cateMainList: [
        {
          name: '3C数码'
        },
        {
          name: '大宗废品'
        },
        {
          name: '家用电器'
        }
      ],
      property: [{
        name: '台式电脑',
        children: [
          {
            name: '智能手机'
          }, {
            name: '笔记本平板'
          }, {
            name: '功能机'
          }
        ]
      },
      {
        name: '型号',
        children: [
          {
            name: '液晶屏<14寸',
            price: 2,
          }, {
            name: '液晶屏14寸',
            price: 3,
          }, {
            name: 'CRT显示器',
            price: 4,
          }, {
            name: '台式主机',
            price: 3,
          }, {
            name: '液晶屏14寸',
            price: 2,
          }, {
            name: 'CRT显示器',
            price: 1.99,
          }]
        }
      ],
      form: {
        appointmentTime: '',
        message: ''
      },
      recycleName: '',
      cateList: [],
      cateName: [],
      showTimePicker: false,
      hours: [
        '00', '01', '02', '03', '04', '05', '06', '07', '08', '09', 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
      ],
      min: ['00', '10', '20', '30', '40', '50', '00'],
      selectValue: -1,
      imgUrl: '',
      baseImgUrl: '',
      hoursIndex: -1,
      minIndex: -1,
      date: [],
      month: [1,2,3,4,5,6,7,8,9,10,11,12],
      dateIndex: -1,
      monthIndex: -1,
      showCate: false,
      plist: [],
      hasAddress: true,
      addressData: {},
      select: 0,
      query: {
        id: '',
        productPrice: '',
        productIcon: '',
        productCount: '',
        productName: ''
      },
      total: ''
    }
  },
  onLoad () {
    if (this.$mp.query.data) {
      var query = JSON.parse(this.$mp.query.data)
      this.query = query
    }
    this.form = {
      appointmentTime: '',
      message: ''
    }
  },
  onShow () {
    this.getAddress()
    this.getDate()
  },
  computed: {
    ...mapState(['checkData'])
  },
  methods: {
    del () {
      this.imgUrl = ''
    },
    upload () {
      var that = this
      wx.chooseImage({
        success: function(res) {
          var tempFilePaths = res.tempFilePaths
          wx.uploadFile({
            url: that.$ApiUrl + 'api/upload', //仅为示例，非真实的接口地址
            filePath: tempFilePaths[0],
            name: 'file',
            formData:{
            },
            success: function(res){
              var data = JSON.parse(res.data).data[0]
              that.imgUrl = data
              that.baseImgUrl = that.$ApiUrl + data.substr(1)
            },
            fail: function (err) {
              console.log(err, 'err')
            }
          })
        }
      })
    },
    saveCate() {
      var property = this.property
      var tmp = []
      property.forEach(v => {
        if(v.childIndex >= 0) {
          tmp.push(v.children[v.childIndex])
        }
      })
      if (tmp.length < property.length) {
        this.$toast('请选择属性!')
        return
      }
      this.plist.push({name: tmp[0].name, size: tmp[1].name, price: tmp[1].price})
      this.showCate = false
    },
    setChildIndex(item, index, citem) {
      this.$set(item,'childIndex', index)
      if (citem.price) {
        this.total = citem.price
      }
    },
    setInput(e, key) {
      this.form[key] = e.mp.detail.value
    },
    getDate() {
      var date = new Date().getDate()
      var max = date + 30
      var dateArr = []
      for (var i = 1; i< max; i++) {
        dateArr.push({v: i > 30 ? i -30 : i})
      }
      this.date = dateArr
    },
     changeTime (e) {
      let {hours, min, month, date} = this
      let index = e.mp.detail.value
      let monthIndex = index[0]
      let dateIndex = index[1]
      let hoursIndex = index[2]
      let minIndex = index[3]
      month = month[monthIndex]
      date = date[dateIndex].v
      hours = hours[hoursIndex]
      min = min[minIndex]
      this.hoursIndex = hoursIndex
      this.minIndex = minIndex
      this.form['appointmentTime'] = month + '月' + date + '日 ' + hours + ':' + min
    },
    save() {
      var {form, plist, cateList, selectValue} = this
      var data = Object.assign({}, form)
      if (plist.length < 1) {
        this.$toast('请添加物品!')
        return
      }
      if (!this.addressData.id) {
        this.$toast('请选择收获地址!')
        return
      }
      if (!data.appointmentTime) {
        this.$toast('请选择预约时间!')
        return
      }
      data.imgUrl = this.imgUrl
      data.addressId = this.addressData.id
      if (cateList[selectValue]) {
        data.recycleCategoryId = cateList[selectValue].id
      }
      var cateName = ''
      this.plist.forEach(v => {
        cateName += v.name + '-' + v.size + ','
      })
      data.cateName  = cateName
      data.recycleCategoryId = '1'
      this.$post('api/recycle/save', data).then(res => {
        if (res.data.success) {
          this.$toast('提交成功!')
          setTimeout(() => {
            wx.navigateBack()
          }, 1000)
        } else {
          this.$toast(res.data.msg)
        }
      })
    },
    getAddress(select) {
      this.$get("api/address/findByOpenId").then(res => {
        if (res.data.success) {
          var list = res.data.data
          if (list.length < 1) {
            this.hasAddress = false;
            return
          }
          if (this.checkData.select == 1) {
            this.addressData = this.checkData
          } else {
            this.addressData = list[0]
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form {
  background: #fff;
  margin-top: 0.3rem;
  .form-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.3rem;
    position: relative;
    flex-wrap: wrap;
    background: #fff;
    border-bottom: 1px solid #f1f1f1;
    .right {
      display: flex;
      align-items: center;
      .picker {
        text-align: center;
        margin-right: -0.3rem;
      }
      .date {
        margin-right: 0.2rem;
      }
    }
    picker {
      flex: 1;
      text-align: center;
    }
    img {
      width: 0.3rem;
      height: 0.3rem;
    }

    .label {
      font-weight: bold;
      padding: 0.2rem 0;
      min-width: 1.6rem;
      white-space: nowrap;
    }
    input {
      flex: 1;
      text-align: right;
      padding-left: 0.2rem;
    }
    .input {
      display: flex;
      align-items: center;
      flex: 1;
      padding-left: 0.2rem;
      padding-bottom: 0.1rem;
      color: #888;
      position: relative;
      &.hasVal {
        color: #333;
      }
      img {
        position: absolute;
        right: 0.2rem;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    select {
      flex: 1;
      border: 1px solid #000;
    }
  }
}

.product {
  margin-top: 0.2rem;
  width: 100%;
  background: #fff;
  .none {
    height: 2rem;
    padding: 0.3rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    .addProduct {
      margin-top: 1rem;
      display: flex;
      align-items: center;
      img {
        width: 0.4rem;
        height: 0.4rem;
        margin-right: 0.2rem;
      }
    }
  }
  .productList {
    max-height: 4.5rem;
    overflow-y: scroll;
  }
  .add {
    text-align: center;
    width: 100%;
    color: #54bf7b;
    font-size: 0.35rem;
    padding: 0.2rem 0;
    border-top: 1px solid #f1f1f1;
    font-weight: bold;
  }
  .rows {
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      flex-flow: column;
      justify-content: flex-start;
      .desc {
        font-size: 0.28rem;
        color: #888;
      }
    }
    .right {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .del {
        color: #f22;
        font-size: 0.25rem;
        margin-left: 0.2rem;
      }
      img {
        width: 0.4rem;
        height: 0.4rem;
      }
      .price {
        color: #f22;
      }
    }
  }
}
.pay-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  height: 1rem;
  width: 100%;
  align-items: center;
  background: #fff;
  .text {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
    color: #54bf7b;
    .icon {
      margin-left: 0.1rem;
    }
  }
  .btn {
    width: 3.5rem;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #54bf7b;
    color: #fff;
  }
}
.page {
  height: 100vh;
  position: relative;
  background: #f5f5f5;
}
.icon {
  width: 0.35rem;
  height: 0.35rem;
  img {
    width: 100%;
    height: 100%;
  }
}
.address-wrap {
  display: flex;
  background: #fff;
  align-items: center;
  // margin: 0.2rem;
  // border-radius: 0.25rem;
  // margin-top: 0.2rem;
  padding: 0.25rem;
  min-height: 1.2rem;
  justify-content: space-between;
  .left {
    margin-right: 0.2rem;
  }
  .user {
    flex: 1;
    .name {
      margin-bottom: 0.15rem;
    }
    .address {
      color: #999;
      font-size: 0.26rem;
    }
  }
  .add {
    color: #54bf7b;
    border-bottom: 1px solid #54bf7b;
  }
}
.goodsDetail {
  display: flex;
  flex-wrap: nowrap;
  padding: 0.2rem;
  align-items: center;
  background: #fff;
  margin: 0.2rem 0;
  img {
    width: 2rem;
    height: 2rem;
    margin-right: 0.2rem;
    border-radius: 0.2rem;
  }
  .info {
    .name {
      margin-bottom: 0.2rem;
    }
    .desc {
      color: #999;
      font-size: 0.28rem;
      .price {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
.rows {
  display: flex;
  justify-content: space-between;
  background: #fff;
  padding: 0.2rem;
  margin: 0.2rem 0;
}
.over {
  background: rgba(33, 33, 33, 0.3);
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 1;
}
.cate-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70vh;
  z-index: 999999999999999;
  background: #fff;
  border-radius: 0.4rem 0.4rem 0 0;
  transform: translateY(100%);
  transition: all 0.5s;
  &.show {
    transform: translateY(0);
  }
  .close {
    position: absolute;
    right: 0.2rem;
    top: 0.2rem;
  }
  .con {
    overflow-y: scroll;
    height: calc(100% - 0.8rem);
  }
  .cate-desc {
    font-size: 0.25rem;
    padding: 0.2rem 0;
    text-indent: 0.2rem;
    background: rgba(190, 190, 190, 0.1);
  }
  .cate-list {
    display: flex;
    overflow-x: scroll;
    .cateItem {
      margin: 0 0.2rem;
      font-weight: normal;
      color: #333;
      padding: 0.15rem 0;
      &.active {
        font-weight: bold;
        &::after {
          content: "";
          position: absolute;
          top: 100%;
          width: 80%;
          left: 50%;
          transform: translateX(-50%);
          border: 1px solid #81ec9a;
          height: 0.1rem;
          border-radius: 0.1rem;
        }
      }
    }
  }
  .title {
    border-bottom: 1px solid #f1f1f1;
    text-align: center;
    height: 0.8rem;
    line-height: 0.8rem;
    width: 100%;
    font-weight: bold;
  }
  .property-wrap {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 2rem;
    .propertyItem {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 0 0.2rem;
      .t {
        width: 100%;
        font-size: 0.25rem;
        margin: 0.15rem 0;
      }
      .childItem {
        border: 1px solid #72c786;
        color: #72c786;
        border-radius: 0.3rem;
        padding: 0.1rem 0.2rem;
        font-size: 0.3rem;
        margin-right: 0.2rem;
        margin-bottom: 0.2rem;
        &.active {
          background: #72c786;
          color: #fff;
        }
      }
    }
  }
  .payWrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.2rem;
    background: #fff;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: 1px solid #e1e1e1;
    .price {
      color: #29d462;
      margin-left: 0.1rem;
    }
    .payBtn {
      background: #29d462;
      color: #fff;
      padding: 0.15rem;
      font-size: 0.3rem;
      border-radius: 0.25rem;
    }
  }
}
.btn {
  width: 80%;
  height: 0.75rem;
  margin: 0.5rem auto;
  line-height: 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.28rem;
  text-align: center;
  background: #54bf7b;
  color: #fff;
}

.timePicker {
  position: fixed;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 45vh;
  z-index: 999999999;
  text-align: center;
  background: #fff;
  opacity: 1;
  transition: bottom 0.3s;
  &.show {
    bottom: 0;
  }
  .oper {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    height: 0.8rem;
    font-size: 0.35rem;
    align-items: center;
    flex-flow: wrap;
    width: 95%;
    padding: 0 20rpx;
    justify-content: space-between;
    color: #29d462;
    border-bottom: 2rpx solid #f2f2f2;
    z-index: 9;
    span:first-child {
      color: #888;
    }
  }
  .pickerViewCol {
    view {
      font-size: 0.35rem;
      height: 0.4rem;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.picker-wrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.picker {
  color: #333;
  text-indent: 0.2rem;
  text-align: right;
  height: 100%;
  position: relative;
  white-space: nowrap;
  padding: 0.1rem 0;
  position: relative;
  span {
    color: #888;
  }
}
.record {
  padding-bottom: 0.25rem;
  border-radius: 0.1rem;
  padding-left: 0.3rem;
  .t {
    display: flex;
    align-items: center;
    height: 0.8rem;
  }
  .imgwrap {
    width: 100%;
    display: flex;
    flex-flow: wrap;
    flex-wrap: nowrap;
    padding: 0.25rem 0;
    .img-item {
      position: relative;
      margin-right: 0.3rem;
      .del {
        position: absolute;
        right: 0;
        top: 0;
        transform: translate(50%, -50%);
        width: 0.35rem;
        height: 0.35rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    img {
      width: 2rem;
      height: 2rem;
    }
  }
}
</style>